<template>
  <section class="editCarBrand">
    <el-dialog
      v-dialogDrag
      :close-on-click-modal="false"
      title="选择知识目录"
      :append-to-body="true"
      :visible.sync="curPopupsVisible"
      @close="sendCode"
      width="800px"
    >
      <dialogHeader slot="title" :title="'选择知识目录'" :styleType="$store.state.app.dialogType"></dialogHeader>
      <div class="filter-container filter-params">
        <el-tree
          :data="menueList"
          @node-click="handleNodeClick"
          :props="defaultProps"
          class="filter-tree el-slide"
          :default-expand-all="false"
          node-key="orgTreeId"
          ref="tree"
          :expand-on-click-node="false"
          highlight-current
        ></el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          v-for="comp in tableButtons"
          :key="comp.compKey"
          :type="comp.type"
          @click="comp.clickEvent"
        >{{comp.text}}</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import { crmApis } from "@/api/apiList/crm";
import { formMixins } from "@/components/mixins/formMixins";
import { requestAPI } from "@/api/commonRequest";
import { debuglog } from "util";
import { constants } from "crypto";
export default {
  components: {
    dialogHeader: () => import("@/components/dialogHeader") //弹窗标题
  },
  props: {
    popupsVisible: { type: Boolean, default: false },
    code: { type: String, default: "" },
    comType: { type: String, default: "" },
    codeField: { type: String, default: "" },
    textField: { type: String, default: "" },
    popupsKey: { type: String, default: "" },
    isMul: { type: Boolean, default: true }
  },
  // 组件混入对象
  mixins: [formMixins],
  data() {
    return {
      menueList: [],
      listQuery: {
        oemCode: "1",
        groupCode: "1"
      },
      defaultProps: {
        children: "children",
        label: "kmTreeName"
      },
      sendData: {},
      curPopupsVisible: this.popupsVisible,
      // 动态组件-按钮
      tableButtons: [
        {
          compKey: "btnKey3",
          type: "primary",
          size: "small",
          clickEvent: () => this.sendCode("kmTreeId", "kmTreeName"),
          text: "确定",
          position: "bottom"
        },
        {
          compKey: "btnKey1",
          type: "",
          size: "small",
          clickEvent: () => this.close(),
          text: "取消",
          position: "bottom"
        }
      ],
      kmTreeId: "",
      kmTreeName: ""
    };
  },
  created() {
    // this.getlLstQuery()
    this.queryMenue();
  },
  methods: {
    // 知识目录查询
    queryMenue(page) {
      let that = this;
      let queryObj = {
        // api配置
        apiConfig: crmApis.kmTreeInfoQueryDirectory,
        // 需要调用的API服务配置
        apiServices: [
          {
            //表格中台返回网格的字段
            apiQueryRow: [
              "kmTreeId",
              "kmTreeName",
              "kmTreeParentId",
              "kmTreeType",
              "orderNo"
            ]
          }
        ],
        //条件/实体参数（变量），根据typeParam中的定义配置
        variables: {
          // pageSize: 10,
          // pageIndex: 1,
          //当前中台使用的名称有dataInfo、info，具体查看API文档
          dataInfo: {
            oemCode: "1",
            groupCode: "1"
          }
        }
      };
      //转换了中台请求格式数据
      var paramD = that.$getParams(queryObj);
      let csdata = {
        dataInfo: {
          oemCode: "1",
          groupCode: "1"
        }
      };
      that.$set(
        paramD,
        "query",
        "query{kmTreeInfoQueryDirectory{msg records result rows{kmTreeId kmTreeName kmTreeParentId kmTreeType orderNo}}}"
      );
      that.$set(paramD, "variables", csdata);
      // 调用中台API方法（可复用）
      requestAPI(paramD).then(response => {
        if (response.result == "1") {
          let results = response.rows;
          var tree = that.$utils.parseTreeFromList(
            results,
            "kmTreeParentId",
            "kmTreeId"
          );
          this.menueList = tree;
        }
      });
    },
    close() {
      this.$emit("close", "");
    },
    handleNodeClick(data) {
      this.kmTreeId = data.kmTreeId;
      this.kmTreeName = data.kmTreeName;
    },
    sendCode(arrayCodeField, arrayTextField) {
      // 获取嵌套组件的选中的值
      const that = this.$refs[this.tableRef];
      let selectData = [
        {
          kmTreeId: this.kmTreeId,
          kmTreeName: this.kmTreeName
        }
      ];
      if (selectData && selectData.length > 0) {
        let tmpCodeField = this.returnCodeField;
        if (!tmpCodeField || tmpCodeField === "") {
          tmpCodeField = arrayCodeField;
        }
        let tmpTextField = this.returnTextField;
        if (!tmpTextField || tmpTextField === "") {
          tmpTextField = arrayTextField;
        }
        this.modelCode = this.$utils.getArrayFromJsonArray(
          selectData,
          tmpCodeField
        );
        this.modelText = this.$utils.getArrayFromJsonArray(
          selectData,
          tmpTextField
        );
      } else {
        this.modelCode = [];
        this.modelText = [];
      }
      debugger;
      var code =
        typeof this.modelCode === "string"
          ? this.modelCode
          : this.modelCode.join(",");
      var text =
        typeof this.modelText === "string"
          ? this.modelText
          : this.modelText.join(",");
      this.$emit(
        "changeCode",
        code,
        text,
        this.codeField,
        this.comType,
        this.popupsKey,
        this.textField,
        this.otherField,
        selectData
      );
    }
    // sendCode() {
    //   debugger
    //   if (JSON.stringify(this.sendData) !== "{}") {
    //     this.$emit(
    //       "changeCode",
    //       this.sendData.kmTreeId.toString(),
    //       this.sendData.kmTreeName.toString(),
    //       this.codeField,
    //       this.comType,
    //       this.popupsKey
    //     );
    //   } else {
    //     this.$emit("changeCode");
    //   }
    //   // var parent = this.$utils.getHasFormFieldParentComponent(this);
    //   // let results = {
    //   //   kmTreeId: this.kmTreeId,
    //   //   kmTreeName: this.kmTreeName
    //   // };
    //   // for (let key in parent.formField) {
    //   //   if (results.hasOwnProperty(key)) {
    //   //     parent.formField[key] = results[key];
    //   //   }
    //   // }
    //   // if (parent.formField[this.codeField] == "") {
    //   //   parent.formField[this.codeField] = results.kmTreeId;
    //   //   parent.formField[this.textField] = results.kmTreeName;
    //   // }
    //   // this.$emit("emitCode", selectData);
    // }
  }
};
</Script>

<style lang="scss" scoped>
/deep/.el-slide {
  height: calc(90vh - 185px);
  overflow-y: auto;
  background: #fff;
}
</style>

